<template>
  <!-- vue3页面 -->
  <section>
    <a-row style="margin-bottom: 20px" :gutter="[16, 16]">
      <a-col span="9">
        <a-col>
          <div class="mainBox">
            <div class="bar" style="margin-bottom: 20px"></div>
            <div class="echart lt">
              <div class="lt_echart">
                <div class="echart_number">
                  <div class="border borderP">
                    <div class="content-number" style="color: #ffeb7b">10</div>
                    <a-divider class="divider" type="vertical" />
                    <div class="content-number" style="color: #b7eb8f">22</div>
                    <a-divider class="divider" type="vertical" />
                    <div class="content-number" style="color: #87e8de">780</div>
                  </div>
                  <div class="title borderP">
                    <div class="title-text" style="color: #ffeb7b">
                      协会数量
                    </div>
                    <a-divider class="divider" type="vertical" />
                    <div class="title-text" style="color: #b7eb8f">
                      创新工作室数量
                    </div>
                    <a-divider class="divider" type="vertical" />
                    <div class="title-text" style="color: #87e8de">
                      创新成果人数
                    </div>
                  </div>
                </div>
                <div class="echart_number">
                  <div class="border borderP">
                    <div class="content-number" style="color: #ffeb7b">200</div>
                    <a-divider class="divider" type="vertical" />
                    <div class="content-number" style="color: #b7eb8f">202</div>
                    <a-divider class="divider" type="vertical" />
                    <div class="content-number" style="color: #87e8de">129</div>
                  </div>
                  <div class="title borderP">
                    <div class="title-text" style="color: #ffeb7b">
                      协会人数
                    </div>
                    <a-divider class="divider" type="vertical" />
                    <div class="title-text" style="color: #b7eb8f">
                      创新工作室人数
                    </div>
                    <a-divider class="divider" type="vertical" />
                    <div class="title-text" style="color: #87e8de">
                      创新成果项数
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="mainBox">
            <div class="bar" style="margin-bottom: 20px"></div>
            <div class="echart lc">
              <div class="lc_echart">
                <MyEchart
                  :options="activitiesTypeNumberOption"
                  ref="activitiesTypeNumberRef"
                />
              </div>
            </div>
          </div>
          <div class="mainBox">
            <div class="bar" style="margin-bottom: 20px"></div>
            <div class="echart lb">
              <div class="lb_echart">
                <MyEchart
                  :options="activitiesHierarchyNumberOption"
                  ref="activitiesHierarchyNumberRef"
                />
              </div>
            </div>
          </div>
        </a-col>
      </a-col>

      <a-col span="15">
        <div class="mainBox">
          <div class="bar" style="margin-bottom: 20px"></div>
          <div class="echart rt">
            <div class="rt_item">
              <MyEchart
                :options="instrumentPanelOption"
                ref="instrumentPanelRef"
              />
            </div>
            <div class="rt_item">
              <MyEchart
                :options="instrumentPanelOption"
                ref="instrumentPanelRef"
              />
            </div>
            <div class="rt_item">
              <MyEchart
                :options="instrumentPanelOption"
                ref="instrumentPanelRef"
              />
            </div>
            <div class="rt_item">
              <MyEchart
                :options="instrumentPanelOption"
                ref="instrumentPanelRef"
              />
            </div>
          </div>
        </div>
        <div class="mainBox">
          <div class="bar" style="margin-bottom: 20px"></div>
          <div class="echart rc">
            <div class="rc_echart">
              <MyEchart
                :options="unionActivitiesDataOption"
                ref="unionActivitiesDataRef"
              />
            </div>
          </div>
        </div>
        <div class="mainBox">
          <div class="bar" style="margin-bottom: 20px"></div>
          <div class="echart rb">
            <div class="rb_echart">
              <MyEchart
                :options="associationActivitiesDataOption"
                ref="associationActivitiesDataRef"
              />
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </section>
  <div class="box"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, shallowRef, onUnmounted } from "vue";
import MyEchart from "./echart.vue";
import { getInstrumentPanelOption } from "./culturalOptions/instrumentPanel";
import { getActivitiesNumberOption } from "./culturalOptions/activitiesNumber";
import { getActivitiesDataOption } from "./culturalOptions/activitiesData";

const instrumentPanelOption = ref();
const activitiesHierarchyNumberOption = ref();
const activitiesTypeNumberOption = ref();
const unionActivitiesDataOption = ref();
const associationActivitiesDataOption = ref();

/** echarts图表的ref */
const instrumentPanelRef = shallowRef();
const activitiesHierarchyNumberRef = shallowRef();
const activitiesTypeNumberRef = shallowRef();
const unionActivitiesDataRef = shallowRef();
const associationActivitiesDataRef = shallowRef();

onMounted(() => {
  // 活动满意度仪表盘
  instrumentPanelOption.value = getInstrumentPanelOption();
  // 年度不同层级活动数量信息
  activitiesHierarchyNumberOption.value = getActivitiesNumberOption();
  // 年度不同类型活动数量信息
  activitiesTypeNumberOption.value = getActivitiesNumberOption();
  // 年度各基层工会活动信息
  unionActivitiesDataOption.value = getActivitiesDataOption();
  // 年度各协会活动信息
  associationActivitiesDataOption.value = getActivitiesDataOption();

  window.addEventListener("resize", onResize);
});

const onResize = () => {
  instrumentPanelRef.value.resize();
  activitiesHierarchyNumberRef.value.resize();
  activitiesTypeNumberRef.value.resize();
  unionActivitiesDataRef.value.resize();
  associationActivitiesDataRef.value.resize();
};

onUnmounted(() => {
  window.removeEventListener("resize", onResize);
});
</script>

<style scoped lang="less">
@font-face {
  font-family: "number";
  src: url("../../assets/echart/number.ttf");
}
section {
  padding: 0 10px;
  color: #fff;
}
.mainBox {
  position: relative;
  width: 100%;
  height: 310px;
  margin-bottom: 20px;
}
.bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 20px solid transparent;
  border-width: 50px 30px 20px 30px;
  border-image: url("../../assets/echart/border2.png") 50 30 20 30 stretch;
  box-sizing: border-box;
  transform: scale(1.02);
  animation: changeOpacity 5s infinite linear reverse;
  transition: all 0.6s;
  .title {
    color: white;
    font-size: 16px;
    padding: 10px 0 0 40px;
  }
}
.lt {
  display: flex;
  width: 100%;
  height: 100%;

  .lt_echart {
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .echart_number {
      width: 100%;
      height: 130px;
      padding: 10px 20px;
      .content-number {
        flex: 1;
        font-size: 50px;
        font-family: "number";
        text-align: center;
      }
      .divider {
        height: 40px;
        border-color: rgba(255, 255, 255, 0.2);
        margin: 0;
      }
      .border {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        border: 1px solid rgba(25, 186, 139, 0.17);
        height: 60px;
      }
      .title {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border: 1px solid rgba(25, 186, 139, 0.17);
        border-top: none;
        &-text {
          flex: 1;
          text-align: center;
          font-size: 16px;
        }
        .divider {
          height: 20px;
          border-color: rgba(255, 255, 255, 0.2);
          margin: 0;
        }
      }
    }
  }
}

.lc,
.lt,
.lb,
.rt,
.rc,
.rb {
  display: flex;
  z-index: 3;
  width: 100%;
  height: 100%;
  .lc_echart,
  .lt_echart,
  .lb_echart,
  .rt_echart,
  .rc_echart,
  .rb_echart {
    z-index: 2;
    width: 100%;
    height: 100%;
  }
}

.rt {
  display: flex;
  z-index: 3;
  width: 100%;
  height: 100%;

  .rt_item {
    width: 25%;
    height: 100%;
  }
}

@keyframes changeOpacity {
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>
